<template>
  <el-card class="box-card">
    <div slot="header" class="header">
      <h1>小二</h1>
      <div class="top-btn">
        <el-button type="text" @click="handleCopy">复制</el-button>
        <el-button type="text" @click="handleEdit">编辑</el-button>
        <el-button type="text" @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div class="txt">
      <p><label>角色音色：</label>邻家女孩</p>
      <p><label>对话语言：</label>普通话</p>
      <p><label>语言模型：</label>Qwen3 实时（响应最快）</p>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    handleEdit() {
      const { item } = this;
      this.$emit("handleEdit", item);
    },
    async handleDelete() {
      const { item } = this;
      try {
        const flag = await this.$modal.confirm("是否确认删除该数据项？");
        if (!flag) return;
        this.$emit("getList");
        this.$modal.msgSuccess("操作成功");
      } catch (error) {
        console.error("操作失败", error);
      }
    },
    handleCopy() {
      this.$emit("handleCopy", item);
    },
  },
};
</script>

<style scoped lang="scss">
.txt {
  font-size: 14px;
  p {
    margin-bottom: 18px;
  }
}

.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  h1 {
    font-size: 18px;
  }
}
</style>
